// import bgImg from "@/assets/images/login/bg.png";
import bgImg from "@/assets/images/login/bg-back.png";
// import masterImg from "@/assets/images/login/6.png";
// import left1 from "@/assets/images/login/5.png";
// import bottom1 from "@/assets/images/login/4.png";
// import bottom2 from "@/assets/images/login/3.png";
// import right1 from "@/assets/images/login/2.png";
// import img7 from "@/assets/images/login/7.png";
// import Copyright from "@/components/Copyright/copyright.vue";
import "./index.scss";
// import { sysTitle, sysLogo } from "../../hooks/useSystem";
import LoginPassword from "./components/loginPassword";
import LoginPhone from "./components/loginPhone";
import LoginScan from "./components/loginScan";
import { ComponentInternalInstance } from "vue";
const Login = defineComponent({
	setup() {
		const isScan = ref(window.location.host.includes("ssiot"));
		const { proxy } = getCurrentInstance() as ComponentInternalInstance;
		const activeName = ref("scan");
		return () => {
			return (
				<div class="login-container h-full">
					<div class="login-left animate__animated animate__fadeIn">
						<img src={bgImg} alt="login" />
						{/* <div class={"img-title"}>
							<img src={img7} alt="login" />
						</div> */}
						{/* <div class="child-img">
							<div class="w-4/5 h-full item.scss-center relative">
								<div class="master-img">
									<img src={masterImg} alt="login" />
								</div>
								<div class="left1">
									<img src={left1} alt="login" />
								</div>
								<div class="bottom1">
									<img src={bottom1} alt="login" />
								</div>
								<div class="bottom2">
									<img src={bottom2} alt="login" />
								</div>
								<div class="right1">
									<img src={right1} alt="login" />
								</div>
							</div>
						</div> */}
					</div>
					<div class="sys-title animate__animated animate__bounceInLeft ">
						{/* <div class="logo hidden">
							<img src={sysLogo()} />
						</div>
						<div class="text hidden">{sysTitle()}</div> */}
					</div>
					<div class="login-form">
						{isScan.value ? (
							<el-tabs v-model={activeName.value} stretch>
								<el-tab-pane label="扫码登陆" name="scan">
									{activeName.value == "scan" ? <LoginScan /> : null}
								</el-tab-pane>
								<el-tab-pane label="手机登录" name="phone">
									<LoginPhone />
								</el-tab-pane>
								<el-tab-pane label="密码登录" name="password">
									<LoginPassword />
								</el-tab-pane>
							</el-tabs>
						) : (
							<div>
								<div class="login-logo pb-9 animate__animated animate__bounceInRight">
									<div class="logo-text">{proxy?.$t("login.form_title.login")}</div>
								</div>
								<LoginPassword />
							</div>
						)}
					</div>
					{/* <Copyright /> */}
				</div>
			);
		};
	}
});

export default Login;
